<script setup>
// 可以去查看vite.config.js这个文件，里面定义了@就是src的意思
import { useAgeStore, useCounterStore } from '@/stores/index.js'
const ageStore = useAgeStore()
const counterStore = useCounterStore()
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
  </header>

  <main>
    <!-- Option Store -->
    <h2>{{ ageStore.age }}岁 姓名:{{ ageStore.name }}</h2>
    <h2>五年后:{{ ageStore.gettersAge }}岁 </h2>
    <button @click="ageStore.addAge">加一年</button>

    <!-- Setup Store -->
    <h2>姓名:{{ counterStore.name }}</h2>
    <h2>年龄:{{ counterStore.count }}</h2>
    <h2>年龄*2:{{ counterStore.doubleCount }}</h2>
    <button @click="counterStore.increment">加一年</button>

  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
  text-align: center;
  /* 添加文本居中 */
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

.wrapper {
  display: block;
  /* 确保wrapper是块级元素 */
  text-align: center;
  /* 确保内部内容居中 */
}

@media (min-width: 1024px) {
  header {
    display: flex;
    flex-direction: column;
    /* 垂直排列logo和wrapper */
    align-items: center;
    /* 水平居中 */
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 0 2rem 0;
    /* 移除左右margin，只保留底部margin */
  }

  header .wrapper {
    color: aliceblue;
    display: flex;
    place-items: center;
    /* 确保内容在容器中居中 */
    justify-content: center;
    /* 水平居中 */
    flex-wrap: wrap;
  }
}
</style>
